/**
 * Created by liubin on 2015/9/16.
 */
import { Link, History } from 'react-router';
import ReactMixin from 'react-mixin';
import React from 'react';
import $ from 'jquery';
import classNames from 'classnames';
import Autobind from 'tools/autobindMixin';
import SidebarMixin from 'global/jsx/sidebar_component';
import LoginForm from 'forms/loginForm';
import { Authorization } from 'actions/authAction';
const { ANONYMOUS } = Authorization;
//import Header from 'common/header';
//import Sidebar from 'common/sidebar';
//import Footer from 'common/footer';

@ReactMixin.decorate(History)
@ReactMixin.decorate(Autobind)
class Body extends React.Component {
    static propTypes = {
        authActions: React.PropTypes.object.isRequired
    }
    //back (e) {
    //    e.preventDefault();
    //    e.stopPropagation();
    //    this.history.goBack();
    //    //this.transitionTo('/app/invoice');
    //}
    handleSubmit(data) {
        console.log(data);
        const { authActions: { login } } = this.props;
        login(data);
    }
    componentWillReceiveProps(nextProps){
        const { authorization } = nextProps;
        // 判断登陆
        if (authorization.logined === true && authorization.authed !== ANONYMOUS) {
            this.props.history.replaceState(null, '/dashboard');
        }
    }
    componentDidMount () {
        $('html').addClass('authentication');
    }
    componentWillUnmount () {
        $('html').removeClass('authentication');
    }
    render () {
        return (
            <Container id='auth-container' className='login'>
                <Container id='auth-row'>
                    <Container id='auth-cell'>
                        <Grid>
                            <Row>
                                <Col sm={12}>
                                    <PanelContainer noControls plain style={{background:'white',borderRadius:10}}>
                                        <Panel>
                                            <PanelBody style={{padding: 0}}>
                                                <div className='text-center bg-darkblue fg-white'>
                                                    <h3 style={{margin: 0, padding: 25}}><Entity entity='loginWelcome' /></h3>
                                                </div>
                                                <div>
                                                    <div className='text-center' style={{padding: 12.5}}>
                                                        <Entity entity='useAccount' />
                                                    </div>
                                                    <div
                                                        style={{padding: 25, paddingTop: 0, paddingBottom: 0, margin: 'auto', marginBottom: 25, marginTop: 25}}>
                                                        <LoginForm onSubmit={this.handleSubmit}/>
                                                    </div>
                                                </div>
                                            </PanelBody>
                                        </Panel>
                                    </PanelContainer>
                                </Col>
                            </Row>
                        </Grid>
                    </Container>
                </Container>
            </Container>
        );
    }
}

@SidebarMixin
class Login extends React.Component
{
    render()
    {
        var classes = classNames({
            'container-open': this.props.open
        });

        return (
            <Container id='container' className={classes}>
                <Body {...this.props}/>
            </Container>
        );
    }
}

export default Login;
